<template>
  <SearchList :mails="mails" />
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { searchMailAPI } from '@/api/mailsAPI'
import SearchList from '@/components/email/search/SearchList.vue'

const route = useRoute()
const mails = ref<any[]>([])

const fetch = async () => {
  const keyword = (route.query.keyword as string) || ''
  if (!keyword) {
    mails.value = []
    return
  }
  const res = await searchMailAPI(keyword)
  if (res.code === 200) {
    mails.value = res.data
  } else {
    mails.value = []
  }
}

onMounted(fetch)
// 监听 keyword 变化
watch(() => route.query.keyword, fetch)
</script>
